<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>草方格</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2892024_v3bwkoatce.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@6.8.4/swiper-bundle.css">
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/search.js"></script>
    <script src="js/zhezhao.js"></script>
    <script src="https://unpkg.com/swiper@6.8.4/swiper-bundle.js"> </script>
</head>

<body>
    <div class="nav">
        <div class="logo">
            <div class="log-img">
                <img src="images/logo.png" alt="">
            </div>
            <div class="logo-text">草方格·Square</div>
        </div>
        <div class="search">
            <div class="searchInput">
                <div class="search-btn">
                    <div class="search-btn-text">商城</div>
                    <div class="search-btn-icon iconfont icon-xiangxia"></div>
                </div>
                <div class="search-input">
                    <div class="search-input-icon iconfont icon-sousuo"></div>
                    <input type="text">
                </div>
            </div>
        </div>
        <div class="navList">
            <div class="navList-item navList-shop">商城</div>
            <div class="navList-item iconfont icon-geren" title="个人中心"></div>
            <div class="navList-item iconfont icon-gerenrenzheng" title="认证中心"></div>
            <div class="navList-item iconfont icon-qianbao" title="我的钱包"></div>
            <div class="navList-item iconfont icon-bangzhu" title="帮助中心"></div>
        </div>
    </div>
    <!-- 遮罩 -->
    <div class="zhezhao">
        <div class="loginContent">
            <!-- <div class="close">x</div> -->
            <div class="login-top">
                <div class="login-logo"><img src="images/login-logo.png" alt="" style="vertical-align: middle;">My
                    Wallet</div>
                <div class="login-close">关闭</div>
            </div>
            <div class="login-bottom">
                <div class="login-text">
                    <img src="images/login-logo.png" alt="">
                    <h3>登录钱包</h3>
                    <span>您即将进入去中心化网络</span>
                </div>
                <div class="login-input">
                    <input type="" placeholder="账户">
                    <input type="password" placeholder="亲输入登录密码">
                    <button>登录</button>
                    <a href="">没有账户 去创建</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <video src="images/video1.mp4" autoplay muted loop></video>
                </div>
                <div class="swiper-slide">
                    <video src="images/video2.mp4" autoplay muted loop></video>

                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev" style="z-index: 100;"></div>
            <div class="swiper-button-next" style="z-index: 100;"></div>
            <div class="square">
                <div class="square-text">Square</div>
                <div class="square-text">让价值自由流通</div>
                <div class="square-list">
                    <span>潮流</span>
                    <span> 音乐</span>
                    <span> 域名</span>
                    <span>虚拟世界</span>
                    <span> 收藏品</span>
                    <span> 交易卡</span>
                </div>
                <div class="square-btn">
                    <div class="wow slideInLeft">
                        发布NFT
                    </div>
                    <div class="wow slideInRight"> 浏览商城 </div>
                </div>
            </div>
        </div>

        <script>
            var mySwiper = new Swiper('.swiper-container', {
                // direction: 'vertical', // 垂直切换选项
                loop: true, // 循环模式选项

                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },

                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

                // 如果需要滚动条
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
            })
        </script>
    </div>
    <!-- 优势 -->
    <div class="advantage">

        <div class="adv-biaoti">优势</div>
        <div class="adv-content">
            <div class="advantageItem wow bounceIn">
                <img src="images/net.png" alt="">
                <p>作品众多</p>
                <span>拥有独家NFT作品，众多前卫创作者，作品分类涵盖范围广</span>

            </div>
            <div class="advantageItem wow bounceIn">
                <img src="images/secure.png" alt="">
                <p>安全可信</p>
                <span>依托司法链与区块链溯源，作品铸造链上留痕，来源可溯，记录可查，版权可信。</span>

            </div>
            <div class="advantageItem wow bounceInUp">
                <img src="images/fear.png" alt="">
                <p>费用更低</p>
                <span>发行手续费低于行业平均水平；NFT作品交易佣金比例低。</span>

            </div>
            <div class="advantageItem wow bounceInRight">
                <img src="images/clock.png" alt="">
                <p>铸造更快</p>
                <span>流程操作更便捷，作品生成更迅速</span>

            </div>
        </div>
    </div>
    <!-- 推荐艺术家 -->
    <div class="longhair">
        <div class="title">
            推荐艺术家
        </div>
        <div class="longhair-content">
            <div class="longair-item">
                <img src="images/longhair.jpg" alt="" class="wow zoomInDown">
                <h5>知否</h5>
            </div>
        </div>
    </div>
    <!-- 教程 -->
    <div class="course w">
        <div class="title">教程</div>
        <div class="course-content">
            <div class="course-item wow rotateInDownLeft">
                <img src="images/course01.png" alt="">
                <div class="course-item-text">
                    <h3>创建账号教程</h3>
                    <p>创建平台账号，提交身份资料，进行身份认证，目前平台提供个人身份及企业身份认证，个人身份认证</p>
                </div>
            </div>
            <div class="course-item">
                <img src="images/course02.png" alt="">
                <div class="course-item-text">
                    <h3>创建账号教程</h3>
                    <p>创建平台账号，提交身份资料，进行身份认证，目前平台提供个人身份及企业身份认证，个人身份认证</p>
                </div>
            </div>
            <div class="course-item wow rotateInDownRight">
                <img src="images/course03.png" alt="">
                <div class="course-item-text">
                    <h3>创建账号教程</h3>
                    <p>创建平台账号，提交身份资料，进行身份认证，目前平台提供个人身份及企业身份认证，个人身份认证</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 分类标签 -->
    <div class="classify w">
        <div class="title">分类标签</div>
        <div class="classify-content">
            <div class="classify-item wow bounceInDown">
                <div class="classify-item-top">
                    <img src="images/classify01.png" alt="">
                    <span>艺术品 203</span>
                </div>
                <div class="classify-item-bottom ">
                    <p> 虚拟艺术品，书画，雕塑，服饰 </p>
                </div>
            </div>
            <div class="classify-item wow bounceInDown">
                <div class="classify-item-top">
                    <img src="images/classify01.png" alt="">
                    <span>艺术品 203</span>
                </div>
                <div class="classify-item-bottom">
                    <p> 虚拟艺术品，书画，雕塑，服饰 </p>
                </div>
            </div>
            <div class="classify-item wow bounceInDown">
                <div class="classify-item-top">
                    <img src="images/classify01.png" alt="">
                    <span>艺术品 203</span>
                </div>
                <div class="classify-item-bottom">
                    <p> 虚拟艺术品，书画，雕塑，服饰 </p>
                </div>
            </div>
            <div class="classify-item wow bounceInUp">
                <div class="classify-item-top">
                    <img src="images/classify01.png" alt="">
                    <span>艺术品 203</span>
                </div>
                <div class="classify-item-bottom">
                    <p> 虚拟艺术品，书画，雕塑，服饰 </p>
                </div>
            </div>
            <div class="classify-item wow bounceInUp">
                <div class="classify-item-top">
                    <img src="images/classify01.png" alt="">
                    <span>艺术品 203</span>
                </div>
                <div class="classify-item-bottom">
                    <p> 虚拟艺术品，书画，雕塑，服饰 </p>
                </div>
            </div>
            <div class="classify-item wow bounceInUp">
                <div class="classify-item-top">
                    <img src="images/classify01.png" alt="">
                    <span>艺术品 203</span>
                </div>
                <div class="classify-item-bottom">
                    <p> 虚拟艺术品，书画，雕塑，服饰 </p>
                </div>
            </div>
        </div>
    </div>

    <!-- 合作伙伴 -->
    <div class="partner w">
        <div class="title">合作伙伴</div>
        <div class="partner-content">
            <div class="partner-item wow slideInLeft">
                <img src="images/partner01.png" alt="">
            </div>
            <div class="partner-item wow slideInLeft">
                <img src="images/partner02.png" alt="">

            </div>
            <div class="partner-item wow slideInRight">
                <img src="images/partner03.png" alt="">

            </div>
            <div class="partner-item wow slideInRight">
                <img src="images/partner04.png" alt="">

            </div>
        </div>
    </div>
    <script src="js/wow.js"></script>
    <script>
        new WOW().init()

    </script>
</body>

</html>